<template>
  <div>
    <!--<x-header :left-options="{showBack: false}">购物车</x-header>-->
    <flexbox v-for="(group,index) in groups">
      <flexbox-item>
          <div onclick="" class="activitygp-lineitem" v-if="index % 2 == 0">
              <img :src="group.src"/>
          </div>
          <div class="activitygp-lineitem"  v-if="index % 2 != 0">
              <span>{{group.title}}</span>
          </div>
      </flexbox-item>
      <flexbox-item>
          <div class="activitygp-lineitem" v-if="index % 2 == 0">
              <span>{{group.title}}</span>
          </div>
           <div class="activitygp-lineitem" v-if="index % 2 != 0">
              <img :src="group.src"/>
          </div>
      </flexbox-item>

    </flexbox>
    <divider>end</divider>
  </div>
</template>

<script>
import { XHeader,Flexbox, FlexboxItem ,Divider } from 'vux';

export default {
  name: '',
  components: {
    XHeader,
    Flexbox,
    FlexboxItem,
    Divider
  },
  data() {
    return {
      groups:[
          {
              src: 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg',
              link: '',
              title: '想象力充值处'
          },
          {
              src: 'https://o3e85j0cv.qnssl.com/waterway-107810__340.jpg',
              link: '',
              title: '智慧想象博物馆1'
          },
          {
              src: 'https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg',
              link: '',
              title: '成长补给站'
          },
          {
              src: 'https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg',
              link: '',
              title: '成长补给站'
          }
      ]

    };
  },
  mounted() {
    this.$nextTick(() => {
    });
  },
  methods: {
      openActivity: function(id){

      }
  },
};
</script>

<style lang="less">
.activitygp-lineitem{
  text-align: center;

}
.activitygp-lineitem img{
  width: 100%;
  height:100%;
}
.activitygp-lineitem span{
  font-weight: bold
}
</style>
